@import vars
@import fonts
@import libs
@import slick-slider

::placeholder
	color: #666

::selection
	background-color: $colorGreen
	color: $colorWhite

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

*
	box-sizing: border-box
	font-family: 'Cuprum', sans-serif
	font-size: 25px
	font-weight: normal
	font-style: normal
	line-height: 1.65

body
	position: relative
	overflow-x: hidden
	background-color: $text

a
	text-decoration: none
	outline: none
	color: $colorA
	display: inline-flex
	&:hover
		color: $colorA
		text-decoration: none

ul, li
	list-style: none
	margin: 0
	padding: 0

.container
	width: 100vw
	max-width: calc(1960px - 392px)
	padding: 0
	margin: 0 auto

button, input[type="button"]
	background-color: $colorGreen
	border: none
	&:hover
		background: darken($colorGreen, 10%)
	
// Custom Sass / Remove before use
.header_top, .header_bottom
	background-color: $colorBlue

header
	display: grid
	grid-template-columns: 1fr
	grid-template-rows: 80px 240px 100px
	.header_top .container
		display: grid
		grid-template-columns: repeat(4, minmax(auto, 392px))
		grid-template-rows: 80px
		color: $colorA
		align-items: center
		.header_contact
			display: flex
			grid-column: 1 / 3
			justify-content: space-around
			div:first-child
				margin-right: 10px
		.header_select
			grid-column: 4 / 5
			display: flex
			justify-content: space-around
		+media-breakpoint-only(md) // (min-width: 768px) and (max-width: 991px)
			grid-template-columns: 1fr 1fr
			.header_contact
				display: grid
				grid-column: 1 / 2
			.header_select
				grid-column: 2 / 3
	.header_middle
		display: grid
		align-items: center
		.container
			display: grid
			grid-template-columns: repeat(4, minmax(auto, 392px))
			grid-template-rows: 240px
			align-items: center
			.header_logo
				grid-column: 1 / 2
				svg
					width: 92%
			.header_search
				grid-column: 2 / 4
				display: flex
			.header_cart
				justify-self: end
				svg
					width: 37px
					fill: $colorA
	.header_bottom
		display: grid
		.container
			display: grid
			grid-template-columns: repeat(4, minmax(auto, 392px))
			grid-template-rows: 100px
			align-items: center
			.header_bottom-button
				#bottom_button-inner
					width: 100%
					height: 100px
					font-weight: 600
					text-align: left
			.header_menu
				grid-column: 2 / 5
				ul
					display: flex
					justify-content: space-around
					margin-right: 30%
					li::before
						font-family: Icomoon
						content: "\e914"
						color: $colorA
						padding-right: 20px
					li, a
						&::after
							display: block
							content: ""
							width: 0
							border-bottom: 2px solid $colorGreen
							transition: width .3s ease-in-out
						&:hover::after
							width: 100%
				.icon-favorite
					display: none



.select_container div
	display: flex
	align-items: center
	max-width: 88%

//.select_container div
//	//padding-right: 10px
//	font-size: 20px
//	position: relative
//	display: flex
//	align-items: center
//	&::after
//		content: "\e901"
//		font-family: Icomoon
//		position: absolute
//		transform: rotate(90deg)
//		cursor: pointer
//		pointer-events: none
//		right: 10%
//	#header_search-category
//		font-size: 22px


select
	cursor: pointer
	padding-right: 20px

.header_top select
	color: $colorA
	background: none
	border: none
	max-width: 100%
	appearance: none
	font-size: 20px
	option
		background-color: $colorBlue

.header_middle
	.header_search
		select
			width: 15vw
			height: 70px
			background: none
			border: 2px solid darken($text, 20%)
			appearance: none
			padding: 0 10px
		input
			width: 30vw
			height: 70px
			background: none
			border: 2px solid darken($text, 20%)
			margin-left: -2px
			padding: 0 15px
		button
			width: 10vw
			color: $colorWhite
	.header_cart
		button
			height: 70px
			color: $colorWhite
			svg
				margin-right: 8px

#header_phone
	position: relative
	&::before
		font-family: Icomoon
		position: absolute
		content: "\e903"
		left: -1.1em

#header_mail
	position: relative
	&::before
		font-family: Icomoon
		position: absolute
		content: "\e904"
		left: -1.1em

#select_money
	margin-right: 5px
	position: relative
	&::after
		position: absolute
		font-family: 'Icomoon'
		font-size: 25px
		content: "\e901"
		left: 84%
		top: -7px
		transform: rotate(90deg)
		pointer-events: none
#select_account
	position: relative
	&::after
		position: absolute
		font-family: 'Icomoon'
		font-size: 25px
		content: "\e901"
		left: 78%
		top: -7px
		transform: rotate(90deg)
		pointer-events: none

.select_search
	position: relative
	&::after
		position: absolute
		font-family: 'Icomoon'
		font-size: 33px
		content: "\e901"
		left: 84%
		top: 7%
		transform: rotate(90deg)
		pointer-events: none
#bottom_button-inner
	position: relative
	&::after
		position: absolute
		font-family: 'Icomoon'
		font-size: 33px
		content: "\e901"
		left: 84%
		top: 20%
		transform: rotate(90deg)


main
	display: grid
	grid-template-columns: 1fr
	grid-template-rows: repeat(4, auto)
	.container
		display: grid
		grid-template-columns: repeat(4, minmax(auto, 392px))
		//grid-template-rows: repeat(2, minmax(0, 350px))
		#commercial_slider
			grid-column: 2 / 4
			grid-row: 1 / 3
			img
				width: 100%
				height: auto
		.commercial_board
			grid-column: 4 / 5
			img
				width: 100%
				height: auto
	.service
		background-color: $colorBlue
		color: $text
		text-transform: capitalize
		font-size: 26px
		.container
			display: grid
			grid-template-columns: repeat(4, minmax(auto, 392px))
			grid-template-rows: 228px
			grid-gap: 10px
			align-items: center
			position: relative
			.service_content
				display: grid
				grid-template-columns: auto 1fr
				font-size: 6px
				grid-gap: 10px
				svg
					fill: $colorA
				&:hover
					svg
						fill: $colorGreen
					color: $colorGreen
				.service_content-item
					align-self: center
	.slider
		background: $colorWhite
		.container
			display: grid
			grid-template-columns: repeat(4, minmax(auto, 392px))
			grid-template-rows: 350px
			.multiple_items
				grid-column: 1 / 5
				display: flex
				flex-direction: row
				align-items: center
				.slider_inner
					position: relative
					.slider_item
						display: grid
						margin: 0 auto
						width: 392px
						height: 300px
						border: 1px solid black
						.slider_title
							text-align: center
						.slider_image
							margin: 0 auto
	//.product
	//	.container
	//		display: grid
	//		grid-template-columns: 1fr
	//		.product_card
	//			grid-template-columns: repeat(4, minmax(auto, 392px))
	//		section
	//			border: 1px solid black

.product div
	display: flex
	flex-direction: column
	.product_card
		display: inline-flex
		position: relative
		.product_menu
			//display: grid
			color: $colorA
			padding:
				left: 2%
				right: 2%
			//align-items: center
			.product_menu-title
				font-weight: bold
				font-size: 1.7em
				line-height: 50px
			.product_menu-view
				font-weight: bold
				font-size: 1.3em
				line-height: 10px
		.product_item-title
			text-align: center
			font-size: 26px
			line-height: 30px
			color: $colorBlue
			padding: 0 15px
			margin: 26% auto 5% auto
		.product_item-image
			width: 270px
			height: 400px
			border-radius: 35px
			border: 1px dotted black
			margin: 0 auto
		.product_item-price
			width: 206px
			height: 48px
			margin: 5% auto
			background-color: $colorGreen
			text-align: center
			font-size: 24px
			font-weight: bold
			line-height: 48px
			color: $colorA
			&:hover
				background-color: lighten($colorBlue, 30%)
				transition: .3s
		.product_item-button
			display: grid
			grid-template-columns: repeat(3, 1fr)
			grid-gap: 50px
			margin: 0 auto
			button
				width: 50px
				height: 50px
				border-radius: 30px
				&:hover
					background-color: lighten($colorBlue, 30%)
					transition: .4s
					transform: scale(1.1)
			.item_button-shop::after
				font-family: Icomoon
				content: "\e915"
				color: $colorA
				font-size: 1.2em
				line-height: 50px
			.item_button-favorite::after
				font-family: Icomoon
				content: "\e917"
				color: $colorA
				font-size: 1.4em
				line-height: 50px
			.item_button-view::after
				font-family: Icomoon
				content: "\e90e"
				color: $colorA
				font-size: 1.4em
				line-height: 50px


.product_menu, .product_item
	width: 392px
	height: 750px

.menu-1, .menu-3
	background-color: $colorBlue
.menu-2
	background-color: $colorGreen

.product_menu::after
	position: absolute
	width: 160px
	height: 80px
	left: 320px
	top: 250px

.menu-1, .menu-3
	&::after
		content: "\e901"
		font-family: Icomoon
		position: absolute
		font-size: 6em
		color: $colorBlue
.menu-2::after
	content: "\e901"
	font-family: Icomoon
	position: absolute
	font-size: 6em
	color: $colorGreen

.product_item
	position: relative

.product_item-sale
	color: $colorA
	position: absolute
	background-image: url("../img/_src/intersect.svg")
	//z-index: -1
	width: 100px
	height: 100px

p
	position: absolute
	top: 0
	left: 10px
	font-size: 1.7em
	z-index: 1

footer
	color: $colorA
	.footer_subscription
		height: 151px
		background: $colorNews
		margin:
			top: 4px
			bottom: 8px
		.container
			display: grid
			grid-template-columns: 1fr 1fr
			grid-template-rows: 151px
			align-items: center
			color: $colorA
			#subscription_text
				display: grid
				padding-left: 228px
				position: relative
				align-items: center
				&::before
					position: absolute
					content: url("../img/_src/subscrab.svg")
					left: 80px
				#subscription_inscription
					font-weight: bold
			#subscription_field
				input
					height: 70px
					&[type="button"]
						width: 20%
						color: $colorA
					&[type="text"]
						width: 75%
						color: lighten($colorBlue, 30%)
						padding:
							left: 15px
							right: 15px
						&::placeholder
							color: lighten($colorBlue, 30%)
	nav
		background-color: $colorGreen
		.container
			display: grid
			grid-template-columns: repeat(4, 1fr)
			grid-template-rows: 423px
			.footer_menu-title
				padding: 0 20px
				.footer_menu-nav a
					margin:
						top: 30px
						bottom: 40px
					text-transform: uppercase
					text-decoration: underline
					line-height: 70px
				.footer_menu-links
					margin-bottom: 10px
					a
						font-size: 20px !important
				.footer_menu-contact
					line-height: 50px
					font-size: 20px
	.footer_info
		background-color: $colorFooterInfo





//.container
//	max-width: 700px
//	padding:
//		right: $gutter/2
//		left: $gutter/2
//	margin:
//		left: auto
//		right: auto
//
//.img-responsive
//	display: block
//	max-width: 100%
//	height: auto
//
//.example-grid
//	display: grid
//	grid-gap: $gutter
//	grid-template-columns: 1fr 1fr
//	grid-template-areas: "left right"
//	> div:first-child
//		grid-area: left
//	> div:last-child
//		grid-area: right
//	+media-breakpoint-down(xs)
//		display: block
//		> div
//			padding: $gutter/2 0


//.parent // Lazy Load Placeholder Generator: https://webdesign-master.ru/services/lazy/
//	background-image: url()
